import React, { useCallback, useState } from 'react'
import styles from './Case.module.scss'
import { Scrollbars } from 'react-custom-scrollbars'

const SortContent = ({ sortList = [] }) => {
  const [contentExceedsHeight, setContentExceedsHeight] = useState(false)
  const handleScroll = (values) => {
    // 当内容高度超出容器高度时，显示滚动条的背景色
    if (values.scrollHeight > 170) {
      setContentExceedsHeight(true)
    } else {
      setContentExceedsHeight(false)
    }
  }
  const scrollStyle = {
    height: 167,
  }
  const renderThumb = ({ style, ...props }) => {
    const thumbStyle = {
      width: '3px',
      backgroundColor: 'rgba(15, 29, 53, 0.15)',
      borderRadius: '2px',
    }
    return <div style={{ ...style, ...thumbStyle }} {...props} />
  }
  const renderTrackVertical = ({ style, ...props }) => {
    const thumbStyle = {
      width: '8px',
      backgroundColor: '#000000',
      height: '100%',
      right: 0,
      width: '3px',
      backgroundColor: 'rgba(15, 29, 53, 0.05)',
    }
    return <div style={{ ...style, ...thumbStyle }} {...props} />
  }

  return (
    <div className={styles.sortContent}>
      <div className={styles.contentTitle}>推荐决策排序：</div>
      <Scrollbars
        style={scrollStyle}
        onScrollFrame={handleScroll}
        renderThumbVertical={renderThumb}
        renderTrackVertical={({ style, ...props }) => {
          const thumbStyle = {
            width: '8px',
            backgroundColor: '#000000',
            height: '100%',
            right: 7,
            width: '3px',
            backgroundColor: contentExceedsHeight
              ? 'rgba(15, 29, 53, 0.05)'
              : 'transparent',
          }
          return <div style={{ ...style, ...thumbStyle }} {...props} />
        }}
        thumbSize={30}
      >
        {sortList.map((item, index) => (
          <div key={index}>
            <div
              className={styles.contentText}
              style={index === sortList.length - 1 ? { marginBottom: 0 } : {}}
            >
              <div className={styles.sortListNum}>{`${index + 1}.`}</div>
              <div>{`${item}`}</div>
            </div>
          </div>
        ))}
      </Scrollbars>
    </div>
  )
}
export default SortContent
